import {Component,EventEmitter} from '@angular/core';
import {AlertComponent, DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'demo',
  inputs: ['h2Value'],
  outputs: ['btnClick'],
  template: `
  <button (click)="clickMe(h2Value)">Change</button>
    <h2 >{{h2Value}}</h2>
  `
})
export class InputComponent {
  public h2Value: string = "Hello";

  public btnClick: EventEmitter<string> = new EventEmitter(false);

  clickMe(arg:string){
    this.btnClick.emit(arg);
  }
}

@Component({
  selector: 'my-app',
  directives: [InputComponent],
  template: `
  <div>
  <demo [h2Value]="customValue" (btnClick)="customClick($event)"></demo>
  </div>
  `
})
export class AppComponent {
  customValue: string = "Hello World!";

  customClick(event) {
    this.customValue="Chage the h2Value!"
    console.log(event);
  }
}

